<!--
 * new page
 * @author: zhuangming
 * @since: 2025-03-04
 * detail.vue
-->
<template>
  <view class="container">
    <image class="detail-header" :src="imgurl + detailData.merBanner"></image>
    <view class="detail-content">
      <view class="detail-title">
        {{ detailData.name }}
      </view>
      <view style="display: flex; align-items: center; justify-content: space-between">
        <view style="display: flex; flex-direction: column; align-items: flex-start">
          <!-- <span style="font-size: 20rpx; background-color: rgba(255, 220, 220, 0.6); color: #FA642F; border: 1rpx solid #FA642F; padding: 1px; margin: 10px 0">{{ detailData.illustrate }}</span> -->
          <span style="font-size: 28rpx">活动时间： {{ detailData.startTime }} 至 {{ detailData.endTime }}</span>
        </view>
        <view v-if="detailData.merPhone" @click="makeCall">
          <image style="width: 60rpx; height: 60rpx" src="../../../static/local_life/phone.png"> </image>
          <view style="font-size: 28rpx"> 电话 </view>
        </view>
      </view>
      <van-divider />
      <view class="title mgb-1 color01 font-s14 font-medium">适用门店</view>
      <lifeInfo :infoType="2" :infoData="detailData" />
    </view>
    <view
      class="bgf pdtb-2 border-radius"
      v-if="activeList && activeList.length"
      style="padding: 15px; border-radius: 12px; background-color: #fff; width: 85%; margin: 10px auto; margin-bottom: 10px; border-radius: 20rpx; background-color: #fff"
    >
      <u-radio-group placement="column" v-model="checked" activeColor="#FA642F" iconSize="20px" labelSize="20px" style="font-size: 12px">
        <u-radio :value="item.id" size="20px" labelSize="20px" v-for="(item, index) of activeList" :key="index" style="font-size: 12px" :label="item.id" :name="item.id">
          <view :style="{ width: '100%', display: 'flex', justifyContent: 'space-between', marginBottom: activeList.length !== index + 1 ? '10px' : '0px' }">
            <view class="font-s16 color08" style="font-size: 16px">
              {{ item.name }}
              <view class="font-s12 mgt-1 color04" style="font-size: 12px; margin-top: 10rpx">库存{{ item.number }}</view>
            </view>
            <view class="">
              <view class="colormark font-s16" style="color: #FA642F; font-size: 16px">￥{{ item.price }}</view>
              <view class="color07" style="font-size: 12px; margin-top: 10rpx" @click="handleDetail(item.id)">
                查看详情
                <uni-icons type="arrowright" size="12"></uni-icons>
              </view>
            </view>
          </view>
        </u-radio>
        <uni-divider v-if="activeList.length !== index + 1" />
      </u-radio-group>
    </view>
    <tabActive class="product-con" :activeData="activeData" :businessId="id" />
    <TabSay :praiseList="praiseList" />
    <tabDetail :detailImg="detailData.showInfo || ''" />
    <view style="padding-bottom: 100px"> </view>
    <view  v-if="activeList&& activeList.length" style="position: fixed; bottom: 0; width: 100%; left: 0; height: 82px; background-color: #fff; display: flex; align-items: center">
      <button
        @click="onGrab"
        :loading="loading"
        style="background-color: #FA642F; width: 90%; height: 40px; border-radius: 10px; color: white; border-radius: 20px; display: flex; align-items: center; justify-content: center"
      >
        立即抢购
      </button>
    </view>
    <subOrder ref="subOrder" :subOrderData="subOrderData" :ebMerActivityTicketId="checked" :ebMerActivityId="activeId" />
  </view>
</template>

<script>
import { getMerInfoByid, clickActivityInfoByid, selectTicketById, appraiseList } from "../../utils/api/local";
import TabSay from "../index/components/tabSay.vue";
import tabDetail from "../index/components/tabDetail.vue";
import tabActive from "../index/components/tabActive.vue";
import subOrder from "../index/components/subOrder.vue";
import lifeInfo from "./components/list_info.vue"
import { IMG_URL } from "../../config/index";
export default {
  components: {
    TabSay,
    tabDetail,
    tabActive,
    subOrder,
    lifeInfo
  },
  props: {
     activeData: {
      type: Array,
      default: () => [],
    },
    /** 商户id */
    businessId: {
      type: String,
      default: "",
    },
    activeId: {
      type: String,
      default: "",
    }
  },
  data() {
    return {
      imgurl: IMG_URL,
      tabs: "活动",
      id: "",
      detailData: {},
      checked: 1,
      activeList: [],
    
      loading: false,
      /** 提交订单页面信息 */
      subOrderData: {},
      /** 活动id */
      /** 评价列表 */
      praiseList: [],
      params: {
        limit: 5,
        page: 1,
      },
      /** 数据是否加载完全 */
      hasMore: true,
      /** type为1表示进入店铺 */
      type: 0,
    };
  },
  onLoad(option) {
    this.type = option.type || 0;
    // this.getDetail(option.id);
    this.getMerInfoByids(this.businessId, option.id);
    this.clickActivityInfoByid(option.id);
    this.appraiseList();
  },
  methods: {
  
    //点击电话按钮
    makeCall() {
      uni.makePhoneCall({
        phoneNumber: this.detailData.merPhone,
      });
    },

    //点击tab切换
    onchangetab(e) {
      this.tabs = e.name;
    } /** 评价列表 */,
    appraiseList() {
      /** 数据加载完成不再请求 */
      if (!this.hasMore) {
        return false;
      }
      appraiseList({
        activityId: this.activeId,
        limit: this.params.limit,
        page: this.params.page,
      }).then((res) => {
        this.hasMore = (res.data.list || []).length >= this.params.page;
        this.praiseList = this.praiseList.concat(res.data.list || []);
        this.params.page += 1;
      });
    },
    handleDetail(id) {
      uni.navigateTo({
        url: "/pages_h5/local_life/detailIndexLogin?id=" + id + "&activeId=" + this.activeId + "&infoType=" + this.type,
      });
    },
    clickActivityInfoByid(id) {
      clickActivityInfoByid({
        id,
      }).then((res) => {
        this.activeList = res.data || [];
        /** 默认选中第一个 */
        if (res.data && res.data.length > 0) {
          this.checked = res.data[0].id;
        }
      });
    },
    getMerInfoByids(businessId, id) {
      getMerInfoByid({ id: id, isDefMerActive: this.type }).then((res) => {
        this.detailData = {};
        (res.data.activityList || []).forEach((item, key) => {
          if (item.id == id) {
            this.detailData = {
              ...item,
              categoryName: res.data.categoryName,
              merAvatar: res.data.ebMer.merAvatar,
              merName: res.data.ebMer.merName,
              merAddress: res.data.ebMer.merAddress,
              serviceScore: res.data.ebMer.serviceScore,
              //   defMerActiveId: res.data.ebMer.defMerActiveId, //传递默认活动id
              //   businessId: res.data.ebMer.id, //传递商户id
              merBanner: item.icon,
            };
          }
        });
      });
    },
    /** 立即抢购 */
    onGrab() {
      this.loading = true;
      selectTicketById({ id: this.checked }).then((res) => {
        this.loading = false;
        this.subOrderData = res.data || {};
        this.subOrderData.activeName = this.detailData.name;
        this.subOrderData.merAvatar = this.detailData.merAvatar;
        this.$refs.subOrder.handleOpen(this.checked);
      });
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  position: relative;
}
.detail-header {
  height: 500rpx;
  width: 100%;
  z-index: -1;
}
.detail-content {
  padding: 15px;
  border-radius: 12px;
  background-color: #fff;
  width: 85%;
  margin: 0 auto;
  margin-top: -30px;
  z-index: 10;
  position: relative; /* 添加 position 属性 */
}
</style>
